<template>
  <div class="app">
	<!-- 在标记内部添加属性时，在属性前是否有： 在解析时，会解析成不同的内容
	 不添加：的情况下，会直接解析为字符串
	 添加了：后，会将内容解析为表达式 -->
	<!-- <h2 a="1+2" :b="1+2" c="hh" :d="hh">这里是测试</h2> -->
	
	 <Person  v-if="isShow"></Person>
	 <button @click="changePerson">卸载person</button>
	 
  </div>
</template>
<script lang="ts" setup name="App">
import Person from './components/Person.vue';
import { ref } from 'vue';

let isShow=ref(true)
function changePerson(){
	isShow.value=false
}

</script>

<style>
.app{
	background-color: lightgray;
	box-shadow: 6px 6px 12px gray;
	border-radius: 6px;
	line-height: 40px;
	padding:10px;
}
</style>
